import { Component, Vue, Prop, PropSync, Watch } from 'vue-property-decorator'
import Styles from './style.less'
import ChinaAreaData from 'china-area-data'

@Component({})
export default class AddressSelect extends Vue {
  /**
   *  示例(设置默认值)：
   *  private province: string = '330000'
   *  private city: string = '330300'
   *  private area: string = '330305'
   *
   *  <AddressSelect
   *    province={this.province}
   *    city={this.city}
   *    area={this.area}
   *    {...{on: {
   *      'update:province': (val: string) => this.province = val,
   *      'update:city': (val: string) => this.city = val,
   *      'update:area': (val: string) => this.area = val
   *    }}}
   *  />
   */
  @PropSync('province', {}) private syncProvince!: string
  @PropSync('city', {}) private syncCity!: string
  @PropSync('area', {}) private syncArea!: string
  // 定义名称之间的分隔符，默认为空
  @Prop({ default: '' }) private fullNameSplit!: string
  // 定义code之间的分隔符，默认为空
  @Prop({ default: '' }) private fullCodeSplit!: string
  // 设置显示大小
  @Prop({ default: 'mini' }) private size!: string
  // 设置间隔大小，默认5px
  @Prop({ default: '5px' }) private gap!: string
  // 定义条选项的 props 具体属性访问：https://element.eleme.cn/#/zh-CN/component/select
  @Prop({}) private provinceProps!: any
  @Prop({}) private cityProps!: any
  @Prop({}) private areaProps!: any

  private provinceList: any | number[] = ChinaAreaData[86]
  private cityList: any | number[] = []
  private areaList: any | number[] = []

  protected render(h: any) {
    return (
      <div class={Styles.addressSelectCom}>
        <el-select
          size={this.size}
          v-model={this.syncProvince}
          {...{ attrs: this.provinceProps }}
        >
          {this.selectMod(this.provinceList)}
        </el-select>
        <el-select
          size={this.size}
          v-model={this.syncCity}
          style={{ marginLeft: this.gap }}
          {...{ attrs: this.cityProps }}
        >
          {this.selectMod(this.cityList)}
        </el-select>
        <el-select
          size={this.size}
          v-model={this.syncArea}
          style={{ marginLeft: this.gap }}
          {...{ attrs: this.areaProps }}
        >
          {this.selectMod(this.areaList)}
        </el-select>
      </div>
    )
  }

  @Watch('province', { immediate: true })
  private provinceWatch(val: string) {
    if (val) {
      this.cityList = ChinaAreaData[val] || {}

      if (Object.keys(this.cityList).length) {
        // 设置市区默认值
        if (!(this.syncCity in this.cityList)) {
          this.syncCity = Object.keys(this.cityList)[0]
        }
      } else {
        if (this.syncCity !== '') {
          this.syncCity = ''
          this.syncArea = ''
          this.areaList = []
        } else {
          this.sendInfo()
        }
      }
    }
  }

  @Watch('city', { immediate: true })
  private cityWatch(val: string) {
    if (val) {
      this.areaList = ChinaAreaData[val] || {}

      if (Object.keys(this.areaList).length) {
        // 设置区默认值
        if (!Reflect.has(this.areaList, this.syncArea)) {
          this.syncArea = Object.keys(this.areaList)[0]
        }
      } else {
        if (this.syncArea !== '') {
          this.syncArea = ''
        } else {
          this.sendInfo()
        }
      }
    }
  }

  @Watch('area')
  private areaWatch(val: string) {
    this.sendInfo()
  }

  /**
   * 生成选项
   * @param Obj 选择对象
   */
  private selectMod(Obj: any) {
    return Object.keys(Obj).map(key => (
      <el-option label={Obj[key]} value={key} />
    ))
  }

  private sendInfo() {
    const provinceName = this.provinceList[this.syncProvince]
    const cityName = this.cityList[this.syncCity]
    const areaName = this.areaList[this.syncArea]

    this.$emit('change', {
      province: this.syncProvince,
      city: this.syncCity,
      area: this.syncArea,
      provinceName,
      cityName,
      areaName,
      fullName: [provinceName, cityName, areaName].join(this.fullNameSplit),
      fullCode: [this.syncProvince, this.syncCity, this.syncArea].join(
        this.fullCodeSplit
      ),
    })
  }
}
